<template>
	<view>
		控制页面
		<view class="bubble-container">
			<!-- <view class="bubble"></view>
			<view class="bubble"></view>
			<view class="bubble"></view>
			<view class="bubble"></view> -->
			<canvasBubbleVue></canvasBubbleVue>
		</view>
		<view class="bubble-container">
			<canvasSprayVue></canvasSprayVue>
		</view>
		<view style="width: 300px; height: 200px; witbackground-color: rgba(0, 255, 0, 0.02); overflow: hidden;">
			<canvas style="width: 300px; height: inherit;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
		</view>

		<!-- <view style="width: 100%;height: 700rpx; border: 1px solid rebeccapurple;">
			 <rainCardVue  />
		</view> -->

	</view>
</template>

<script>
	import canvasBubbleVue from '../../componets/canvasBubble/canvasBubble.vue';
	import canvasSprayVue from '../../componets/canvasSpray/canvasSpray.vue';
	export default {
		components: {
			canvasBubbleVue,
			canvasSprayVue,
			// rainCardVue
		},
		data() {
			return {
				rainText: '1', // 初始为空
			}
		},
		onTabItemTap(item) {
			console.log(item);
		},
		onReady() {
			this.drawCanvas();
		},
		methods: {
			drawCanvas(){
				var context = uni.createCanvasContext('firstCanvas')
				var width = '';
				var height = '';
				const query = uni.createSelectorQuery();
				//获取宽度
				query.select('#firstCanvas').fields({
					size: true
				}, (res) => {
					width = res.width;
					height = res.height;
				}).exec();
				let numArr = Array(parseInt(width / 8)).fill(parseInt(height));
				let charArr = "&*^%$#@!~`|/?+-".split('');
				let charNum = () => charArr[Math.floor(Math.random() * charArr.length)];
				let charNum2 = () => Math.floor(Math.random() + 0.5)
				
				setInterval(() => {
					
					// context.setFillStyle("#000000")
					context.setFillStyle(`rgba(0, 0, 0, 0.04)`);
					context.fillRect(0, 0, width, height);
					// context.drawImage("/static/3.png",0,0,width,height);
					context.setFillStyle("#b1b1b1");
					context.setFontSize(10) ;
					context.shadowColor = '#5b5b5b';
					context.shadowBlur = 20;
					context.shadowOffsetY = 30;
					numArr.forEach((item, index) => {
						//octx.fillText(charNum(),index*10, item);
						context.fillText(charNum(), index * 8, item);
						numArr[index] =Math.random() < 0.05 ? height : item - 10;
					})
					context.draw();
				}, 100)
			}
		}
	}
</script>

<style lang="scss">
	.bubble-container {
		width: 400rpx;
		height: 400rpx;
		position: relative;
		// overflow: hidden;
		border: 1px rebeccapurple solid;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}
</style>